<template>
  <div>
    <el-breadcrumb class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'NewsList'}">新闻中心</el-breadcrumb-item>
      <el-breadcrumb-item >修改新闻</el-breadcrumb-item>
    </el-breadcrumb>

    <el-form  label-width="100px" class="demo-ruleForm"
              :model="news"  ref="news" style="margin-top: 30px"
    >
      <table class="btm" v-loading="loading">
        <el-form-item label="新闻标题" prop="resource">
          <el-input v-model="news.newsTitle" placeholder="请输入新闻标题" style="width: 350px"></el-input>
        </el-form-item>
        <el-form-item label="发布人" prop="resource">
          <el-input v-model="news.createPerson" style="width: 160px" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item style="width: 1000px">
          <div id="wangEditor">
          </div>
        </el-form-item>
      </table>
      <el-form-item>
        <el-button type="primary" @click="saveNews">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import wangEditor from 'wangeditor'
  export default {
    name: "update-news",
    data(){
      return {
        loading:'',
        newsId:'',
        editor: null,
        news:{
          newsTitle:'',
          createPerson:'',
          newsContent:''
        }
      }
    },

    mounted() {
      this.newsId=this.$route.query.newsId;

      this.editor1();
    },
    methods:{

      // getNews(){
      //   this.$ajax.post(this.$config.url + `news/selNewsById`,{
      //     "newsId":this.newsId
      //       }
      //   ).then(res => {
      //     if(res.data.message=="succ"){
      //       this.news=res.data.object;
      //     }else{
      //       this.$message.error("出错了，未找到该新闻信息")
      //     }
      //   }).finally(() => {
      //   })
      // },
      editor1(){
        this.wangEditor();
      },
      wangEditor(){
        // this.getNews();
        const editor = new wangEditor(`#wangEditor`);
        editor.config.height = 500;
        // 配置 onchange 回调函数，将数据同步到 vue 中
        editor.config.onchange = (newHtml) => {
          this.news.newsContent = newHtml
        };
        // 创建编辑器
        editor.create();
        this.$ajax.post(this.$config.url + `news/selNewsById`,{
              "newsId":this.newsId
            }
        ).then(res => {
          if(res.data.message=="succ"){
            this.news=res.data.object;
            editor.txt.html(this.news.newsContent)
          }else{
            this.$message.error("出错了，未找到该新闻信息")
          }
        }).finally(() => {
        })
        this.editor = editor;
      },
      saveNews(){
        this.$ajax.post(this.$config.url + `news/updateNews`,this.news
        ).then(res => {
          if(res.data.message=="succ"){
            this.news=res.data.object;
            this.$message.success("修改成功！")
          }else{
            this.$message.error("出错了，未找到该招聘会信息")
          }
        }).finally(() => {
        })
      }
    },
    beforeDestroy() {
      // 调用销毁 API 对当前编辑器实例进行销毁
      this.editor.destroy()
      this.editor = null
    }
  }
</script>

<style scoped>

</style>